<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>收藏夹</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/> -->
    <style>
        body {
            /*background: #fff;*/
            background: #f3f3f3;
        }

        .aui-waterfall-footer {
            /*background: #fff !important;*/
        }

        .contain {
            /*            background: #f3f3f3;*/
        }

        .cancelFav {
        }

        .text-price {
            font-size: 14px;
            color: red;
            line-height: 0;
        }

        .aui-img-object {
            width: 45px !important;
            height: 45px !important;
        }

        .aui-img-body {
            color: #333;
            line-height: 45px;
            padding-left: 12px;
        }

        /*        body {
                    background: #fff;
                }

                .contain {
                    background: #f3f3f3;
                }

                .bigPic .divPrice {
                    color: #ec2e2e;
                    font-weight: bold;
                    text-align: left;
                    padding-left: 10px !important;
                    font-size: 14px;
                }

                .bigPic .divBuy {
                    text-align: right;
                    padding-right: 10px !important;
                    color: #327afa;
                    font-size: 12px;
                    float: right !important;
                }

                .bigPic .divPrice, .divBuy {
                    padding: 5px;
                    overflow: hidden;
                }

                .aui-ellipsis-2 {
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-wrap: break-word;
                    white-space: normal !important;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .aui-list-view-cell {
                    border-radius: 2px;
                }


                .bigPic.aui-list-view.aui-grid-view {
                    padding: 0 !important;
                    background: #f3f3f3;
                }

                .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell {
                    padding: 0 !important;
                }

                .bigPic .aui-col-xs-6:nth-of-type(2n+1) {
                    margin-right: 1%;
                }

                .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
                    margin: 0 0 0 5px;
                    margin-bottom: 1px;
                    text-align: left;
                    height: 50px;
                }

                .bigPic li {
                    background: #fff !important;
                    margin-bottom: 8px;
                }

                .bigPic .aui-col-xs-6 {
                    width: 49.5%;
                }

                .bigPic .line {

                }

                .stockCount {
                    width: 100%;
                    overflow: hidden;
                    height: 25px;
                    line-height: 25px;
                    color: #000;
                    font-size: 12px;
                    text-align: left;
                    margin-left: 5px;
                    color: #9c9c9c;
                }

                .proPic {
                    position: relative;
                    font-size: 12px;
                }

                .proPic img {
                    display: block;
                }

                .cancelCollection span {
                    color: #a2a2a2;
                    padding: 5px;
                    overflow: hidden;
                    display: block;
                    font-size: 14px;
                    margin-right: 5px;
                }*/

        /*商家收藏*/
        /*        .aui-img-body {
                    height: 60px;
                    line-height: 60px;
                }

                .sellerCollection .aui-list-view:after {
                    border: none;
                }

                .aui-list-view.aui-in .aui-list-view-cell:after {
                    left: 0;
                }

                .sellerCollection .aui-list-view-cell {
                    padding: 5px 15px;
                }

                .sellerCollection {
                    display: none;
                }

                .aui-list-view .aui-img-object {
                    max-width: 60px;
                    height: 60px;
                    line-height: 60px;
                }

                .proCollection {
                    padding-top: 10px;
                }*/

    </style>
</head>
<body>
<div class=" contain">
    <div class="proCollection">
        <div class="kongshuju">
            <p>暂无数据</p>
        </div>
        <ul class="aui-waterfall" id="mallCollection-content">

        </ul>
    </div>
    <div class="sellerCollection">
        <div class="kongshuju">
            <p>暂无数据</p>
        </div>
        <!-- <ul class=" mui-table-view historyListUl aui-list-view" id="companyCollection-content">

        </ul> -->
        <ul id="companyCollection-content">

        </ul>
    </div>
</div>
<script id="mallCollection-template" type="text/x-dot-template">
    {{for (var i in it) { }}
    <li data-id="{{=it[i].itemid}}">
        <div class="aui-waterfall-header" onclick="gotoproinfo({{=it[i].itemid}})">
            <img src="{{=it[i].thumb}}"/>
        </div>
        <div class="aui-waterfall-body" onclick="gotoproinfo({{=it[i].itemid}})">
            {{=it[i].title}}
        </div>
        <div class="aui-waterfall-footer"> 
            <span class="text-price">
                ¥{{=it[i].price}}
            </span>
            <span class="aui-pull-right">
                <span tapmode class="cancelFav cancelCollection" onclick="cancelFav(this);">取消收藏</span>
            </span>
        </div>
    </li>


    <!--     <li class="aui-list-view-cell aui-img aui-col-xs-6" data-id="{{=it[i].itemid}}">
            <div class="proPic"
                 onclick="gotoproinfo({{=it[i].itemid}})">
                <img class="aui-img-object" src="{{=it[i].thumb}}">
            </div>
            <div class="proInfo">
                <div class="aui-img-body  aui-ellipsis-2"
                     onclick="gotoproinfo({{=it[i].itemid}})">
                    {{=it[i].title}}
                </div>
                <div class="aui-border-b line"></div>
                <div class="divPrice aui-pull-left">
                    ￥<span class="price ">{{=it[i].price}}</span>
                </div>
                <div class=" aui-pull-right cancelCollection">
                    <span>取消收藏</span>
                </div>
            </div>
        </li> -->
    {{ } }}
</script>
<script id="companyCollection-template" type="text/x-dot-template">
    {{for (var i in it) { }}
    <li class="aui-list-view-cell aui-img" onclick="go2Shop({{=it[i].userid}},'../')" style="background: #fff;">
        <img class="aui-img-object aui-pull-left" src="{{=it[i].thumb}}">
        <div class="aui-img-body aui-ellipsis-1">
            {{=it[i].company}}
        </div>
    </li>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<!-- <script type="text/javascript" src="../../script/echo.js"></script> -->
<script type="text/javascript" src="../../script/common.js"></script>
<!-- <script type="text/javascript" src="../../script/myInfo.js"></script> -->
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<!-- <script type="text/javascript" src="../../script/mui.js"></script> -->


<script type="text/javascript" src="../../script/aui-waterfall.js"></script>

<script type="text/javascript">
    var type = 1, page = 1, isLock = false;
    apiready = function () {
        getStorageAll();
        api.parseTapmode();
        api.addEventListener({
            name: 'favoriteStatus'
        }, function (ret, err) {
            type = ret.value.status;
            page = 1;
            api.refreshHeaderLoading();
        });
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/ptr_pull.png',
            bgColor: '#efeff4',
            textColor: '#959595',
            textDown: '下拉刷新',
            textUp: '松开刷新',
            showTime: true
        }, function (ret, err) {
            isLock = false;
            page = 1;
            getData();
        });

        api.refreshHeaderLoading();

        //监听是否达到底部上拉加载
        api.addEventListener({
            name: 'scrolltobottom'
        }, function (ret, err) {
            page++;
            if (!isLock) getData(page);
        })

        //监听取消收藏
        api.addEventListener({
            name: 'updateShopFavoriteStatus'
        }, function (ret) {
            if (ret.value) {
                if (type == 2) {
                    page = 1;
                    isLock = false;
                    api.refreshHeaderLoading();
                }
            }
        });

    }

    //接收win跨域执行tab切换
    function changeContent(type) {
        if (type == "product") {
            type = 1;
            $(".proCollection").css({"display": "block"});
            $(".sellerCollection").css({"display": "none"});
        } else {
            type = 2;
            $(".proCollection").css({"display": "none"});
            $(".sellerCollection").css({"display": "block"});
        }
    }

    function cancelFav(obj) {
        var $this = $(obj);
        if (confirm('确定取消收藏？')) {
            var itemid = $this.closest("li").attr('data-id');
            collectionCancel(itemid);
            $this.closest("li").fadeOut(function () {
                $(this).remove();
            });
//            api.toast({msg: "操作成功！"});


        }
    }

    //获取商品或商家列表
    function getData(toPage) {
        if (isLock)return;
        toPage = toPage ? toPage : page;

        if (toPage == 1) api.refreshHeaderLoading();

        data = {
            userName: user_name,
            type: type,
            page: toPage,
        };
        url = "User/getCollection";

        isLock = true;
        ajaxRequest(url, 'post', data, function (ret, err) {
            isLock = false;
            api.refreshHeaderLoadDone();
            if (ret.status == 1) {
                $(".kongshuju").hide();

                if (type == 1) {
                    content = $api.byId('mallCollection-content');
                    tpl = $api.byId('mallCollection-template').text;
                } else {
                    content = $api.byId('companyCollection-content');
                    tpl = $api.byId('companyCollection-template').text;
                }

                var tempFn = doT.template(tpl);
                if (page > 1) {
                    if (!$.trim(ret.msg)) {
                        isLock = true;
                        return;
                    }
                    $api.append(content, tempFn(ret.msg));
                } else {
                    $api.html(content, tempFn(ret.msg));
                }

                if (type == 1) {
                    //瀑布流
                    $aui.waterfall($api.byId("mallCollection-content"), {
                        col: 2,//列数
                        padding: 10,//容器内边距
                        space: 10//列间距
                    });
                }
            } else {

                if (page == 1) {
                    $(".kongshuju").show();
                    if (type == 2) {
                        $('#companyCollection-content').html('');
                    }
                }
                api.toast({
                    msg: '已经加载完成',
                    duration: 2000,
                    location: 'bottom'
                });
                isLock = true;
            }
        });
        hideLoading();
    }

    //取消收藏
    function collectionCancel(id) {
        showLoading();
        data = {
            userName: user_name,
            type: type,
            id: id,
        };
        url = "User/collectionCancel";
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.status == 1) {

                //发送监听
                api.sendEvent({
                    name: 'updateItemFavoriteStatus',
                    extra: {
                        itemid: id,
                        status: 0
                    }
                });
                //发送监听
                api.sendEvent({
                    name: 'collectionCancel',
                    extra: {
                        key: 'true'
                    }
                });
                api.toast({
                    msg: '取消成功',
                    duration: 2000,
                    location: 'bottom'
                });
            } else {
                api.toast({
                    msg: '取消失败',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
        hideLoading();
    }

    //跳转商品详细页
    function gotoproinfo(itemid) {
        api.openWin({
            name: 'proInfo_win',
            url: '../proInfo_win.html',
            pageParam: {
                itemid: itemid
            },
            //delay: 300
        });
    }
</script>
</html>